@import 'styles/vars';

.center-body {
    flex: 1;
    border-right: 1px solid #f5f5f5;
    overflow-x: auto;
    min-width: 620px;
    position: relative;

    .preview-button {
        position: fixed;
        bottom: 100px;
        right: 260px;
    }
    .doc-button {
        position: fixed;
        bottom: 160px;
        right: 260px;
    }

    .drag-header {
        width: 100%;
        text-align: center;
        padding: 2px 0;
        background-color: @primary;
        color: white;
        font-weight: bold;
        position: relative;

        &-closed {
            position: absolute;
            right: 6px;
            top: 4px;
            width: 20px;
            cursor: pointer;
            &:hover {
                opacity: .6;
            }
        }

        &:hover {
            cursor: move;
        }
    }
    
    .less-container(){
        position: fixed; 
       
        z-index: 1;
        background-color: white;
        box-shadow: 0 1px 10px 0 hsla(0, 0%, 90%, .75);
    }

    .doc-container {
        .less-container;
        left: calc((100% - 620px) / 2);
        top: 140px;
       
        .doc-body {
            overflow: auto;
            height: calc(100% - 35px);
            width: 100%;
        }
    }
    
    .preview-container {
        .less-container;
        right: 305px;
        bottom: 48px;
 
        .pc-body {
            overflow: auto;
            height: calc(100% - 35px);
            width: 100%;
        }
    }

    .panel-div {
        height: calc(100vh - 46px);
        overflow-y: auto;

        pre {
            margin-top: 2px !important;
        }

        .design-wrapper {
            position: relative;

            .design-nodesign-tip {
                position: absolute;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                top: 20%;
                font-size: 14px;
                color: #dcdcdc;
                font-weight: bold;
                letter-spacing: 1.2px;

                &-text {
                    margin-top: 12px;
                }
            }
        }

        .design-nochoose-tip {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            top: 25%;
            color: @placeholder;
            letter-spacing: 1.2px;

            &-text {
                margin-top: 12px;
            }

        }
    }
}

.emptyTips {
    ul {
        margin-top: 25px;
        color: @secondary;
        font-weight: 400;
    }
}